// 折线图 全学科薪资走势
// 1.先找到盒子，页面布局中id=line
// 2.引入echarts的js文件
// 3.初始化echarts，但是多种盒子都需要初始化，里面定义的变量名会重复，所以封装成一个函数变成局部变量

// 曲线图的函数
function myecharts(nameid) {
    let myChart = echarts.init(document.querySelector(nameid))
    let option = {
        //标题配置
        title: {
            text: '2022全学科薪资走势',//文本标题
            // 颜色大小
            textstyle: {
                // color: '',
                fontSize:18,
            },
            left: 10,
            top:15
        },
        // 颜色
         color:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#499FEE' // 0% 处的颜色
            }, {
                offset: 1, color: '#5D75F0' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        },
        // x轴
        xAxis: {          
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLable: { color: '#999' },
            axisLine: {
                lineStyle: {
                    color: '#ccc',
                    type:"dashed"
                } },
        },
        // y轴
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                type:'dashed'
            } } 
        },
        // 鼠标移入提示
         tooltip: {
             trigger:'axis'
        },
        //  网格
        grid: { top: '20%' },
        // 数据
        series: [
            {
                data: [9000, 12000, 15000, 13000, 10000, 18000, 14000, 10000, 12000, 13000, 15000, 19000],
                type: 'line',
                smooth: true,
                lineStyle: { width: 6 },
                symbolSize: 10,
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#499FEE' // 0% 处的颜色
                        },
                        {offset: 0.8, color: 'rgba(255,255,255,0.2)'},    {
                            offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                }
            }
        ]
    };
    myChart.setOption(option)
}
myecharts('#line')
// 饼图薪资分布的函数
function bingtu() {
    let myChart = echarts.init(document.querySelector('#salary'))
    const option = {
        // 配置标题
        title: {
            top: 15,
            left: 9,
            text: '班级薪资分布',
            textstyle: { fontSize: 16 }      
        },
        // 鼠标移入的提示
        tooltip: {
          trigger: 'item'
        },
        // 图例的设置
        legend: {
          bottom: '6%',
          left: 'center'//居中
        },
        // 颜色设置
        color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
        // 系列数据
        series: [
          {
            name: '班级薪资分布',
            type: 'pie',//饼图
            radius: ['50%', '64%'],//内外圈的半径
            avoidLabelOverlap: false,//标签防止重叠
            // 每一项的样式，设置圆角
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
                },
            // 文字标签不显示
            label: {
              show: false,
              position: 'center'
                },
            // 视觉导线不显示
            labelLine: {
              show: false
                },
            // 这个是中间会显示文字的
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: '40',
            //     fontWeight: 'bold'
            //   }
            // },
            data:[
                { value: 1048, name: '1万以下' },
                { value: 235, name: '1万-2万' },
                { value: 580, name: '1.5万-2万' },
                { value: 484, name: '2万以上' }
                ],
          }
        ]
    };
    myChart.setOption(option)
}
bingtu()
// 男女薪资饼图
function bingtu2() {
    let myChart = echarts.init(document.querySelector('#gender'))
    const option = {
        // 配置标题
        title: [
            { top: 15,
            left: 10,
            text: '男女薪资分布',
            textstyle: { fontSize: 16 }
            },  
            { 
                text: '男生',
                top: '45%',
                left:'45%',
                textstyle: { fontSize: 12 }
            },  
            { 
                text: '女生',
                top: '85%',
                left:'45%',
                textstyle: { fontSize: 12 }
            },    
        ],
        // 鼠标移入的提示
        tooltip: {
          trigger: 'item'
        },
        // // 图例的设置
        // legend: {
        //   bottom: '6%',
        //   left: 'center'//居中
        // },
        // 颜色设置
        color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
        // 系列数据
        series: [
          {
            name: '男生薪资分布',
            type: 'pie',//饼图
            radius: ['20%', '30%'],//内外圈的半径
            center:['50%', '30%'],//中心点跟下面的三七分
            // 每一项的样式，圆角
            // itemStyle: {
            //   borderRadius: 10,
            //   borderColor: '#fff',
            //   borderWidth: 2
            //     },
            // 文字标签可以去掉，因为默认就是显示的
            label: {
              show: true,
            //   position: 'center'    这个是可以让文字显示在中间
            },
            // 视觉导线也可以去掉，默认显示
            labelLine: {
              show: true
            },
            data: [
                { value: 15, name: '1万以下' },
                { value: 235, name: '1万-2万' },
                { value: 580, name: '1.5万-2万' }
              ],
            },
            {   //因为有两个饼图，所以两个数据
                name: '男生薪资分布',
                type: 'pie',//饼图
                radius: ['20%', '30%'],//内外圈的半径
                center:['50%', '70%'],
                data: [
                    { value: 1048, name: '1万以下' },
                    { value: 235, name: '1万-2万' },
                    { value: 580, name: '1.5万-2万' }
                  ]
                },
        ]
    };
    myChart.setOption(option)
}
bingtu2()
// 班级每组薪资
function classcharts() {
    let myChart = echarts.init(document.querySelector('#lines'))
    const option = {
    // 网格设置
    grid:{left:70,
      top:30,
      right:30,
      bottom:50
    },
    xAxis: {
          type: 'category',
          axisLine:{
            lineStyle: {
              color:['#ccc'],
              type:'dashed'
                }
            },
          axisLabel: {
              color: '#999'
            },
         data: ['张三', '李四', '赵云', '张飞', '马超', '黄忠', '亚索', '盲僧'],
    },
    yAxis: {
            type: 'value',
            // Y轴分割线配置
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
      },
    tooltip:{ trigger: 'item' },
    color:[{
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                  offset: 0, color: '#34D39A' // 0% 处的色
              }, {
                  offset: 1, color: 'rgba(52,211,154,0.2' // 100% 处的颜色
              }],
              global: false // 缺省为 false
          },{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#499FEE' // 0处的颜色
            },
              {
                offset: 1, color:'rgba(73,159,230.2)' //100% 处的颜色
            }],
            global: false // 缺省为 false
          }],
  series: [
    {
      data: [12200, 17932, 13901, 13934, 21290, 23300,13300, 13320],
      type: 'bar',
      name: '期望薪资' // 这个数据的名字，可以在鼠标移入的示上显示
    },
    {
      data: [22820, 19932, 16901, 15934, 31290, 13300,14300, 18320],
      type: 'bar',
      name: '就业薪资' // 这个数据的名字，可以在鼠标移入的示上显示
    }
    ]
    };
    myChart.setOption(option)
}
classcharts()
// 中国地图
function mapCharts() {
    // 因为用地图表示每个省有几名同学所以可以提前准备好数据
    const mapData = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 3 },
    { name: '天津', value: 2 },
    { name: '上海', value: 4 },
    { name: '重庆', value: 1 },
    { name: '河北', value: 20 },
    { name: '河南', value: 23 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 15 },
    { name: '黑龙江', value: 12 },
    { name: '湖南', value: 2 },
    { name: '安徽', value: 5 },
    { name: '山东', value: 18 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 5 },
    { name: '浙江', value: 1 },
    { name: '江西', value: 4 },
    { name: '湖北', value: 3 },
    { name: '广西', value: 2 },
    { name: '甘肃', value: 9 },
    { name: '山西', value: 11 },
    { name: '内蒙古', value: 14 },
    { name: '陕西', value: 14 },
    { name: '吉林', value: 10 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 3 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 1 },
    { name: '宁夏', value: 1 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 }
  ]
    let myChart = echarts.init(document.querySelector('#map'))
    const option = {
        title: {
            text: '籍贯分布',
            top: 15,
            left: 10,
            textstyle:{fontSize:16}
        },
        series:[ {
            name: '籍贯分布',
            type:'map',
            map: 'china',
            // 通过lable设置每个省的名字
            label: {
                show: true,
                fontSize: 10,
                color: 'rgba(0,0,0,0.7)',
            },
            // 设置每个区域的默认颜色
            itemStyle: {
                borderColor: 'rgba(0, 0, 0, 0.2)',
                areaColor:'#E0FFFF'
            },
            // 设置地图高亮状态（鼠标移入）的样式
            emphasis: {
                areaColor: '#34D39A',
                // borderWidth: 0,
                shadowBlur: 20,
                shadowColor:'rgba(0, 0, 0, 0.5)'
            },
            data:mapData
        }],
        // 鼠标移入提示
        tooltip: {
            trigger: 'item',
            // 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无)
            formatter: '{b}:{c}位学员',// 提示自定义提示的格式
            borderColor:'transparent',//提示框边框透明
            backgroundColor: 'raba(0,0,0,0.5)',//提示框背景色
            textstyle:{color:'#fff'}
        },
        // 视觉映射组件
        visualMap: {
            // type: 'piecewise', // 定义为分段型 visualMap
            type: 'continuous',// 定义为连续型 visualMap
            max: 20,
            min: 0,
            text: [20, 0],
            left: 40,
            bottom: 20,
            inRange: {
                color: ['#fff', '#0075F0']
              },
        }
    }
    myChart.setOption(option)
}
mapCharts();
